<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <title>使用v-on</title>
    </head>
    <body>
        <!-- view层模版 -->
        <div id="app">
            <button v-on:click="sayHello">click me</button>
        </div>
        <!-- 导入vue.js -->
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
        <script>
            Vue.config.devtools = true
            let vm = new Vue({
                el: "#app",
                // model：数据
                data: {
                    items: [
                        {message: "hello"},
                        {message: "world"},
                        {message: "china"},
                        {message: "japan"},
                        {message: "usa"},
                        {message: "british"}
                    ]
                },
                // 方法必须定义到vue的methods对象之中, v-on来绑定事件
                methods: {
                    // event要不要都是可以的
                    sayHello: function (event) {
                        alert(this.items[0].message)
                        // alert(123)
                    }
                }

            });
        </script>

        <!-- view层模版，使用简化的语法 -->
        <div id="app2">
            <span> {{age}}</span>
            <!-- 使用简化的绑定语法   -->
            <input type="button" value="改变count为指定的值" @click="changeAge(23,'小黑')">
        </div>
        <script>
            Vue.config.devtools = true
            let vm2 = new Vue({
                el: "#app2",
                data: {
                    age: ''
                },
                methods: {
                    // 新的方式定义方法，并且使用新的方式定义方法
                    changeAge(age, name) {
                        this.age = age;
                        alert(name)
                    }
                }

            });
        </script>

    </body>
</html>